<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Picker</title>
  <link rel="stylesheet" href="picker.css">
</head>
<body>
  <input id="country-input" />
  <script src="jquery.js"></script>
  <script src="picker.js"></script>
  <script>
    $(function () {
      var defaultIndex = 0;
      var countryList = [
        { value: '86', name: '86-CN-中国', telLen: 11 },
        { value: '852', name: '852-HK-中国香港', telLen: 8 },
        { value: '853', name: '853-MO-中国澳门', telLen: 8 },
        { value: '886', name: '886-TW-中国台湾', telLen: 9 },
        { value: '66', name: '66-TH-泰国', telLen: 10 },
        { value: '60', name: '60-MY-马来西亚', telLen: 9 },
        { value: '82', name: '82-KR-韩国', telLen: 10 },
        { value: '81', name: '81-JP-日本', telLen: 10 },
        { value: '65', name: '65-SG-新加坡', telLen: 8 }
      ];

      var $countryInput = $('#country-input').val(countryList[defaultIndex].value);

      // 参数说明详见 picker.js
      $countryInput.picker({
        title: '请选择区号',
        data: countryList,
        name: 'name',
        value: 'value',
        selectedIndex: defaultIndex,
        pickerId: 'country-picker',
        onOk: function (selectedValue, selectedIndex) {
          console.log(selectedValue, selectedIndex);
          $countryInput.val(selectedValue);
        },
        onCancel: function () {
          console.log('点击了取消');
        }
      });
    });  
  </script>
</body>
</html>